<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="node">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>

    <script>
        /**
         * DOM中共有12种节点类型
         * 
         * 所有的DOM节点类型都必须实现Node接口
         * JavaScript中Node接口被实现为Node类型。所有节点类型都继承Node类型，所以每种节点类型都有相同的基本属性和方法
         * 每个节点都有nodeType属性，表示该节点的类型，有12个数值
        */
        const someNode = document.getElementById('node')
        console.log(someNode.nodeType, Node.ELEMENT_NODE) // 1  1  表示是元素节点


        // 1、nodeName与nodeValue
        if (someNode.nodeType == Node.ELEMENT_NODE) { // 先检查节点是不是元素
            // 显示元素的标签名
            // 对于元素，nodeName始终是标签名，nodeValue是Null
            console.log(someNode.nodeName) 
        }


        // 2、节点关系

        // childNodes
        console.log('---节点关系---')
        // 一个类数组，里面装的子节点，随着节点的变化而变化
        console.log(someNode.childNodes)
        
        // parentNode指向DOM树的父元素

        // childNodes列表中每一个节点都是同列表中的兄弟节点
        // [child1, child2, child3]中使用previousSibling指向上一个兄的，nextSilbing指向下一个兄弟
        // child1的previousSibling=null，child3的nexSilbing=null
        // 父节点的第一个子节点和最后一个分别有FristName和lastName属性
        console.log(someNode.childNodes[0].nextSibling.nextSibling) // #text
        console.log(someNode.childNodes[1].previousSibling) // #text

        // 使用hasChildNodes()可以判断有没有子节点
        console.log(someNode.hasChildNodes()) // true

        // ownerDocument指向document
        console.log(someNode.childNodes[1].ownerDocument)
    </script>
</body>
</html>